<script setup lang='ts'>
import { useGetCategoryList, useGetPruductList } from '@fl/api/mall-api'
import { genOssUrl, oss } from '@fl/logics/oss'
import { Splide, SplideSlide } from '@splidejs/vue-splide'

const active = ref()

const params = computed(() => {
    return {
        leaf: 0,
        page: 1,
        path: unref(active),
        size: 10,
    }
})

const { data: categoryData, isLoading: categoryLoading } = useGetCategoryList()

const { data: productData, isLoading: productLoading } = useGetPruductList(params)

const firstImage = computed(() => {
    return productData.value?.productList?.records?.[0]?.productImage?.split(';')[0]
})

const firstData = computed(() => {
    return productData.value?.productList?.records?.[0]
})

const restArr = computed(() => {
    return productData.value?.productList?.records.slice(1) ?? []
})

const showList = computed(() => productData.value?.productList?.records?.length)

function getPdImg(item: any) {
    if (!item?.productImage)
        return ''

    return item.productImage?.split(';')[0]
}

function openMallWindow(val: any) {
    console.log(val)
    window.open(`${import.meta.env.VITE_API_MALL_PATH}/product-info?id=${val.productNo}`, '_blank')
}

watchEffect(() => {
    if (categoryData.value) {
        active.value = categoryData.value?.[0]?.path
    }
})
</script>

<template>
    <div class="py-40 my-20 w-full">
        <div class="mx-auto w-1300">
            <div class="mb-40 text-30 font-700 flex">
                <div>在线商城</div>
            </div>

            <ElSkeleton v-if="categoryLoading"
                        :rows="5"
            />

            <el-tabs v-else
                     v-model="active"
            >
                <el-tab-pane v-for="item in categoryData"
                             :key="item.categoryName"
                             :name="item.path"
                >
                    <template #label>
                        <span class="flex gap-10 items-center">
                            <span>{{ item.categoryName }}</span>
                        </span>
                    </template>
                </el-tab-pane>
            </el-tabs>

            <ElSkeleton v-if="productLoading"
                        :rows="5"
            />

            <template v-else>
                <div v-if="showList"
                     class="flex gap-30"
                >
                    <el-image v-if="firstImage"
                              class="h-300 w-300 cursor-pointer"
                              :src="firstImage"
                              fit="cover"
                              @click="openMallWindow(firstData)"
                    />

                    <Splide v-if="restArr.length"
                            class="flex-1 w-1"
                            :options="{
                                autoplay: true,
                                gap: '10px',
                                perPage: 5,
                                rewind: true,
                            }"
                    >
                        <SplideSlide v-for="(item, index) in restArr"
                                     :key="index"
                        >
                            <div class="bg-#fff text-center h-300 w-180 cursor-pointer"
                                 @click="openMallWindow(item)"
                            >
                                <el-image v-if="getPdImg(item)"
                                          class="mb-10 h-200 w-full cursor-pointer"
                                          :src="getPdImg(item)"
                                          fit="cover"
                                />

                                <div class="px-20 mb-10 text-16 font-bold truncate"
                                     :title="item?.productName"
                                >
                                    {{ item?.productName }}
                                </div>

                                <span class="text-#86909C cursor-pointer">
                                    {{ item?.brandName }}
                                </span>
                            </div>
                        </SplideSlide>
                    </Splide>
                </div>

                <div v-else
                     class="text-20 text-#C9CDD4 font-500 text-center"
                >
                    <el-image style="width: 220px; height: 220px"
                              :src="genOssUrl(oss.go.nodata)"
                              fit="cover"
                    />

                    <div>暂无数据</div>
                </div>
            </template>
        </div>
    </div>
</template>
